import React from 'react';

// 高阶组件是一个函数，接收一个组件，返回一个组件。
const isLogin = false; // localStorage redux

// 在 Hook 出现之前，他就是用来复用我们状态逻辑的最好方式。
const Profile = (props) => {
    return (
        <div>
            <p>用户姓名：{props.nickname}</p>
            <p>用户角色：{props.role}</p>
            <p>用户邮箱：{props.email}</p>
        </div>
    );
};

const login = (Comp) => {
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isLoading: false,
            };
        }

        async componentDidMount() {
            this.setState({ isLoading: true });
            const user = await new Promise((resolve) => {
                // 请求数据
                setTimeout(() => {
                    // 模拟请求了数据
                    const user = {
                        nickname: '管理员',
                        role: 'admin',
                        email: 'abc@qq.com',
                    };
                    resolve(user);
                }, 2000);
            });
            this.setState({
                isLoading: false,
                user,
            });
        }

        render() {
            return (
                <div>
                    {this.state.isLoading && <p>加载中....</p>}
                    {!this.state.isLoading && (
                        <Comp {...this.props} user={this.state.user} />
                    )}
                </div>
            );
        }
    };
};

const withLogger = (Comp) => {
    console.log('执行了日志记录');
    return Comp;
};

@withLogger
@login
@withLogger
@withLogger
@withLogger
class Admin extends React.Component {
    render() {
        return <Profile {...this.props.user} />;
    }
}

// const Dashboard = ({ user }) => {
//     // ...
//     return <Profile {...user} />;
// };

export default Admin;
